/**
 * @Description: 选项按钮组件
 * @author tao.xie
 * @date 2019-07-23 15:24
*/
<template>
  <div class="tab_option flex-h flex-vc">
    <template v-for="(item,index) in tabList">
      <div
        class="item flex-v flex-vc flex1"
        :key="index"
        @click="goToPage(item)"
      >
        <img :src="item.imgURL" />
        <p>{{item.name}}</p>
      </div>
    </template>
  </div>
</template>
<script>
import { AppRouterUtils, UserBeanUtils } from 'vue-xiaobu-utils'
export default {
  data() {
    return {
      tabList: window.tabList
    }
  },
  methods: {
    goToPage(item) {
      // 跳转
      if (item.isNeedLogin) {
        if (item.type === 'changtu') {
          // 长运的链接，特殊化处理，直接链接后面跟上phone=xxxxxxx
          if (UserBeanUtils.isUserLogin()) {
            window.location.href = item.goUrl + '?phone=' + UserBeanUtils.getUserInfo().PHONE
            // window.location.href = item.goUrl + '?phone=' + UserBeanUtils.getUserPhone()
          } else {
            AppRouterUtils.goLogin()
          }
        } else {
          AppRouterUtils.detectionGoToPage(item.goUrl)
        }
      } else {
        AppRouterUtils.open(item.goUrl)
      }
    }
  }
}
</script>
<style>
.tab_option {
  width: 685px;
  padding: 16px 32px 30px 32px;
}
.item {
  width: 120px;
}
.item > img:first-of-type {
  width: 120px;
  height: 120px;
}
.item > p:first-of-type {
  color: #333333;
  font-size: 14px; /*no*/
  line-heihgt: 20px; /*no*/
}
</style>
